<template>
  <!-- 薪酬管理页面 -->
  <div class="page">
    <!-- 搜索页面 -->
    <el-form
      ref="salaryInfoSearch"
      :model="salaryInfoSearch"
      size="small"
      :inline="true"
      class="query-form"
    >
      <el-form-item>
        <el-input
          size="small"
          autocomplete="off"
          v-model="salaryInfoSearch.name"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="salaryInfoSearch.office"
          placeholder="部门"
          style="width: 100%"
        >
          <el-option
            v-for="item in optionsOffice"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="salaryInfoSearch.postName"
          placeholder="岗位"
          style="width: 100%"
        >
          <el-option
            v-for="item in optionsJobs"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          style="width: 100%"
          v-model="salaryInfoSearchTiem"
          type="monthrange"
          range-separator="-"
          format="yyyy-MM"
          value-format="yyyy-MM"
          start-placeholder="开始月份"
          @change="getSTime"
          end-placeholder="结束月份"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button size="small" type="primary" @click="searchSalary()"
          >查询</el-button
        >
        <el-button
          size="small"
          style="margin-left: 10px"
          @click="resetsearchUsers()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 内容页面 -->
    <div class="bg-white top">
      <!-- 按钮 -->
      <div style="display: flex">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-close"
          @click="SalaryByUser_add = true"
          >添加</el-button
        >
        <el-button
          size="small"
          type="warning"
          icon="el-icon-circle-close"
          @click="add_out()"
          >下载模板</el-button
        >
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          @click="deleteCar()"
          :disabled="this.checkSalaryNum == ''"
          >删除</el-button
        >
        <div style="margin-left: 10px">
          <el-upload
            :action="`${this.$http.BASE_URL}/sys/person/importSalary`"
            :show-file-list="false"
            :headers="{ token: $cookie.get('token') }"
            :on-success="
              (response, file, fileList) => {
                files = fileList
                  .map(
                    (item) => (item.response && item.response.url) || item.url
                  )
                  .join('|');
                $message.success(`导入成功`);
                this.getSalaryManagement();
              }
            "
            :limit="1"
            :on-exceed="
              (files, fileList) => {
                $message.warning(
                  `当前限制选择 1 个文件，本次选择了 ${
                    files.length
                  } 个文件，共选择了 ${files.length + fileList.length} 个文件`
                );
              }
            "
          >
            <el-button size="small" type="success" icon="el-icon-circle-close"
              >导入</el-button
            >
          </el-upload>
        </div>
      </div>
      <el-table
        ref="salaryManagement"
        :data="salaryManagement"
        @selection-change="selectioSalaryChang"
        height="calc(100% - 80px)"
        size="small"
        :cell-style="cellStyle"
        style="border: 1px solid #d6cfe2"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        class="table"
        :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName"
        show-summary
        :summary-method="getSummaries"
        v-loading="salaryLoading"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="salyear"
          label="日期" align="center" fixed="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            prop="user.name"
            label="姓名"
            fixed="left" align="center"
            show-overflow-tooltip
          ></el-table-column>
        <el-table-column label="基本信息">
          <el-table-column
            prop="idnumber.name"
            label="部门" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="job"
            label="岗位" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column label="考勤 (天)">
          <el-table-column
            prop="shouldattendanceday"
            label="应出勤" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="traveldays"
            label="出差" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="leavedays"
            label="请假" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="realityattendanceday"
            label="实际出勤" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column label="固定工资 (元)">
          <el-table-column
            prop="basepay" align="center"
            label="基本工资"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="postwage" align="center"
            label="岗位工资"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="meritpay" align="center"
            label="绩效工资"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="combinedbasic"
            label="固定合计" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column label="福利待遇 (元)">
          <el-table-column
            prop="senioritypay"
            label="工龄工资" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="mealallowance"
            label="餐费补助" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="trafficallowance"
            label="交通补助" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="commission"
            label="业务提成" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="travelallowance"
            label="出差补助" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="attendancebonus"
            label="全勤奖" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="overtime" align="center"
            label="加班费"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="communicatesubsidy"
            label="通信补助" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="othersupport"
            label="其他补助" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="totalwelfarebenefits"
            label="福利合计" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="shouldsalary"
          label="应发工资(元)"
          width="100px" align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="扣减项目 (元)">
          <el-table-column align="center"
            prop="housingprovidentfund"
            label="公积金"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center"
            prop="party"
            label="党费"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center"
            prop="basicoldagepension"
            label="基本养老"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="basicmedicalcare"
            label="基本医疗" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="unemploymentinsurance"
            label="失业保险" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="individualincometax"
            label="所得税" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="workInjury"
            label="工伤" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="lately"
            label="迟到" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="leaveearly"
            label="早退" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="absenteeism"
            label="旷工" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="otherdeductions"
            label="其他扣款" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="deductionscombined"
            label="扣减合计" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column label="企业保险 (元)">
          <el-table-column
            prop="providentFund"
            label="企业公积金"
            width="110px" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="pension"
            label="企业养老"
            width="110px" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="medical"
            label="企业医疗" align="center"
            width="110px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="unemployment"
            label="企业失业" align="center"
            width="110px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="businessInjury"
            label="企业工伤" align="center"
            width="110px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="otherFee"
            label="企业其他费用"
            width="110px" align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="totalFees"
            label="企业费用合计"
            width="110px" align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="netpayroll"
          label="实发工资(元)"
          width="100px" align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="salaryHandleSize"
        @current-change="salaryHandleCurrent"
        :current-page.sync="salaryInfoPageNo"
        :page-size="salaryInfoPageSize"
        layout="total, prev, pager, next, jumper"
        :total="salaryInfoTotal"
        style="margin: 1rem 0"
      >
      </el-pagination>
      <!-- 新增工资 -->
      <div>
        <el-dialog
          title="添加薪资信息"
          :visible.sync="SalaryByUser_add"
          width="70%"
        >
          <el-form
            ref="addSalaryByUser"
            :model="addSalaryByUser"
            :rules="rule"
            size="small"
          >
            <el-row style="margin-bottom: 10px">
              <el-col
                ><span style="font-size: 14px; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>基本信息：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item prop="salyear" label="日期：" label-width="110px">
                  <el-date-picker
                    v-model="addSalaryByUser.salyear"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    type="month"
                    placeholder="选择日期"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="user" label="姓名：" label-width="110px">
                  <el-select
                    v-model="addSalaryByUser.user"
                    placeholder="请选择"
                    @change="userChang"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in userIdList"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="job" label="岗位：" label-width="110px">
                  <el-input
                    v-model="addSalaryByUser.job"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item prop="idnumber" label="部门" label-width="110px">
                  <el-input
                    v-model="addSalaryByUser.idnumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="idcard"
                  label="身份证号："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.idcard"
                    maxlength="18"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="phone" label="电话：" label-width="110px">
                  <el-input
                    v-model="addSalaryByUser.phone"
                    maxlength="11"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item
                  prop="bankofdeposit"
                  label="银行开户行："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.bankofdeposit"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="bankaccount"
                  label="银行卡号："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.bankaccount"
                    maxlength="18"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="banknumber"
                  label="银行行号："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.banknumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 10px 0">
              <el-col
                ><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>考勤 (天)：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="shouldattendanceday"
                  label="应出勤："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.shouldattendanceday"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="traveldays"
                  label="出差："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.traveldays"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="leavedays"
                  label="请假："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.leavedays"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="realityattendanceday"
                  label="实际出勤："
                  label-width="110px"
                >
                  <span
                    >{{
                      Number(
                        this.addSalaryByUser.shouldattendanceday -
                          this.addSalaryByUser.traveldays -
                          this.addSalaryByUser.leavedays
                      )
                    }}
                    (天)</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 10px 0">
              <el-col
                ><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>基本工资 (元)：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="basepay"
                  label="基本工资："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.basepay"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="postwage"
                  label="岗位工资："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.postwage"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="meritpay"
                  label="绩效工资："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.meritpay"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="combinedbasic"
                  label="基本合计："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay)
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 10px 0">
              <el-col
                ><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>福利待遇 (元)：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="senioritypay"
                  label="工龄工资："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.senioritypay"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="mealallowance"
                  label="餐费补助："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.mealallowance"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="trafficallowance"
                  label="交通补助："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.trafficallowance"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="commission"
                  label="业务提成："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.commission"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="travelallowance"
                  label="出差补助："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.travelallowance"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="attendancebonus"
                  label="全勤奖："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.attendancebonus"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="overtime"
                  label="加班费："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.overtime"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="communicatesubsidy"
                  label="通信补助："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.communicatesubsidy"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="othersupport"
                  label="其他补助："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.othersupport"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="totalwelfarebenefits"
                  label="福利合计："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.senioritypay) +
                      Number(this.addSalaryByUser.mealallowance) +
                      Number(this.addSalaryByUser.trafficallowance) +
                      Number(this.addSalaryByUser.commission) +
                      Number(this.addSalaryByUser.travelallowance) +
                      Number(this.addSalaryByUser.attendancebonus) +
                      Number(this.addSalaryByUser.overtime) +
                      Number(this.addSalaryByUser.communicatesubsidy) +
                      Number(this.addSalaryByUser.othersupport)
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 10px 0">
              <el-col
                ><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>扣减合计 (元)：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="basicoldagepension"
                  label="基本养老："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.basicoldagepension"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="basicmedicalcare"
                  label="基本医疗："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.basicmedicalcare"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="unemploymentinsurance"
                  label="失业保险："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.unemploymentinsurance"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="housingprovidentfund"
                  label="公积金："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.housingprovidentfund"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="individualincometax"
                  label="所得税："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.individualincometax"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="lately" label="迟到：" label-width="110px">
                  <el-input
                    v-model="addSalaryByUser.lately"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="leaveearly"
                  label="早退："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.leaveearly"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="absenteeism"
                  label="旷工："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.absenteeism"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="party" label="党费：" label-width="110px">
                  <el-input
                    v-model="addSalaryByUser.party"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="workInjury"
                  label="工伤："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.workInjury"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="otherdeductions"
                  label="其他扣款："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.otherdeductions"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="deductionscombined"
                  label="扣减合计："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.basicoldagepension) +
                      Number(this.addSalaryByUser.basicmedicalcare) +
                      Number(this.addSalaryByUser.unemploymentinsurance) +
                      Number(this.addSalaryByUser.housingprovidentfund) +
                      Number(this.addSalaryByUser.individualincometax) +
                      Number(this.addSalaryByUser.lately) +
                      Number(this.addSalaryByUser.leaveearly) +
                      Number(this.addSalaryByUser.absenteeism) +
                      +Number(this.addSalaryByUser.party) +
                      Number(this.addSalaryByUser.workInjury) +
                      Number(this.addSalaryByUser.otherdeductions)
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 新增的一项 -->
            <el-row style="margin: 10px 0">
              <el-col
                ><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"
                  ><i class="el-icon-menu"></i>企业保险 (元)：</span
                ></el-col
              >
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="providentFund"
                  label="企业公积金："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.providentFund"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="pension"
                  label="企业养老："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.pension"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="medical"
                  label="企业医疗："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.medical"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="unemployment"
                  label="企业失业："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.unemployment"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="businessInjury"
                  label="企业工伤："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.businessInjury"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="otherFee"
                  label="企业其他费用："
                  label-width="110px"
                >
                  <el-input
                    v-model="addSalaryByUser.otherFee"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4">
                <el-form-item
                  prop="totalFees"
                  label="企业费用合计："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.providentFund) +
                      Number(this.addSalaryByUser.pension) +
                      Number(this.addSalaryByUser.medical) +
                      Number(this.addSalaryByUser.unemployment) +
                      Number(this.addSalaryByUser.businessInjury) +
                      Number(this.addSalaryByUser.otherFee)
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top: 16px; font-weight: 500">
              <el-col :span="6">
                <el-form-item
                  prop="shouldsalary"
                  label="应发工资："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay) +
                      (Number(this.addSalaryByUser.senioritypay) +
                        Number(this.addSalaryByUser.mealallowance) +
                        Number(this.addSalaryByUser.trafficallowance) +
                        Number(this.addSalaryByUser.commission) +
                        Number(this.addSalaryByUser.travelallowance) +
                        Number(this.addSalaryByUser.attendancebonus) +
                        Number(this.addSalaryByUser.overtime) +
                        Number(this.addSalaryByUser.communicatesubsidy) +
                        Number(this.addSalaryByUser.othersupport))
                    }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  prop="netpayroll"
                  label="实发工资："
                  label-width="110px"
                >
                  <span
                    >￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay) +
                      (Number(this.addSalaryByUser.senioritypay) +
                        Number(this.addSalaryByUser.mealallowance) +
                        Number(this.addSalaryByUser.trafficallowance) +
                        Number(this.addSalaryByUser.commission) +
                        Number(this.addSalaryByUser.travelallowance) +
                        Number(this.addSalaryByUser.attendancebonus) +
                        Number(this.addSalaryByUser.overtime) +
                        Number(this.addSalaryByUser.communicatesubsidy) +
                        Number(this.addSalaryByUser.othersupport)) -
                      (Number(this.addSalaryByUser.basicoldagepension) +
                        Number(this.addSalaryByUser.basicmedicalcare) +
                        Number(this.addSalaryByUser.unemploymentinsurance) +
                        Number(this.addSalaryByUser.housingprovidentfund) +
                        Number(this.addSalaryByUser.individualincometax) +
                        Number(this.addSalaryByUser.lately) +
                        Number(this.addSalaryByUser.leaveearly) +
                        Number(this.addSalaryByUser.absenteeism) +
                        Number(this.addSalaryByUser.party) +
                        Number(this.addSalaryByUser.workInjury) +
                        Number(this.addSalaryByUser.otherdeductions))
                    }}</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="SalaryByUser_add = false"
              >取 消</el-button
            >
            <el-button size="small" type="primary" @click="addSalarys()"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import tableStyles from "../../../../utils/mixins.js";
import { colorSpan } from "../../sys/dashboard/echarts/default.js";

export default {
  mixins: [tableStyles],
  data() {
    var bankAccountValid = (rule, value, callback) => {
      const strBin =
        "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
      if (!value) {
        return callback(new Error("收款账户不能为空"));
      } else if (!Number.isInteger(+value)) {
        callback(new Error("银行卡号必须全为数字"));
      } else if (value.trim().length < 12 || value.trim().length > 19) {
        callback(new Error("银行卡号长度必须在12到19之间"));
      } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
        callback(new Error("银行卡号开头6位不符合规范"));
      } else {
        callback();
      }
    };
    return {
      // 公司ID
      companyId: "",
      //部门下拉选
      optionsOffice: [],
      //岗位下拉选
      optionsJobs: [],
      //顶部搜索
      salaryInfoSearchTiem: "",
      salaryInfoSearch: {
        office: "",
        name: "",
        postName: "",
        timeOne: "",
        timeTwo: "",
      },
      //批量删除
      checkSalaryNum: [],
      // 导入
      files: "", //导入的文件
      // 薪酬管理存的数据
      salaryManagement: [],
      salaryLoading: null, //加载表格
      // 分页
      salaryInfoPageNo: 1,
      salaryInfoPageSize: 10,
      salaryInfoTotal: 0,

      SalaryByUser_add: false,
      userIdList: [], //新增工资姓名下拉选
      addSalaryByUser: {
        //添加的字段
        salyear: "", //工资年月
        user: "", //姓名
        idnumber: "", // 部门
        job: "", //岗位
        idcard: "", //身份证号
        phone: "", //电话
        bankaccount: "", //银行卡号
        bankofdeposit: "", //银行开户行
        banknumber: "", //银行行号

        shouldattendanceday: "", //应出勤
        traveldays: "", //出差天数
        leavedays: "", //请假天数
        realityattendanceday: "", //实际出勤天数

        basepay: "", //基本工资
        postwage: "", //岗位工资
        meritpay: "", //绩效工资
        combinedbasic: "", //基本合计

        senioritypay: "", //工龄工资
        mealallowance: "", //餐费
        trafficallowance: "", //交通
        commission: "", //业务提成
        travelallowance: "", //出差补助
        attendancebonus: "", //全勤奖
        overtime: "", //加班费
        communicatesubsidy: "", //通信补助
        othersupport: "", //其他补助
        totalwelfarebenefits: "", //福利合计

        basicoldagepension: "", //基本养老
        basicmedicalcare: "", //基本医疗
        unemploymentinsurance: "", //失业保险
        housingprovidentfund: "", //住房公积金
        individualincometax: "", //个人所得税
        lately: "", //迟到扣款
        leaveearly: "", //早退扣款
        absenteeism: "", //旷工扣款
        party: "", //党费
        workInjury: "", //工伤扣款
        otherdeductions: "", //其他扣款
        deductionscombined: "", //扣减合计

        providentFund: "", //企业公积金
        pension: "", //企业养老
        medical: "", //企业医疗
        unemployment: "", //企业失业
        businessInjury: "", //企业工伤
        otherFee: "", //企业其他费用
        totalFees: "", //企业费用合计

        shouldsalary: "", //应发工资
        netpayroll: "", //实发工资
      },
      //校验正确
      rule: {
        salyear: { required: true, message: "请选择日期", trigger: "blur" },
        idnumber: { required: true, message: "请选择部门" },
        job: { required: true, message: "请输入岗位", trigger: "blur" },
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 15, max: 18, message: "请输入正确的身份证", trigger: "blur" },
          {
            required: true,
            pattern:
              /^[1-9][0-9]{5}(18|19|20)[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}([0-9]|(X|x))/,
            message: "请输入正确的身份证",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的电话", trigger: "blur" },
          {
            required: true,
            pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
            message: "请输入正确的电话",
            trigger: "blur",
          },
        ],
        bankaccount: {
          required: true,
          trigger: "blur",
          validator: bankAccountValid,
        },
        bankofdeposit: {
          required: true,
          message: "请输入银行开户行",
          trigger: "blur",
        },
        shouldattendanceday: {
          required: true,
          message: "请输入应出勤",
          trigger: "blur",
        },
        traveldays: { required: true, message: "请输入出差", trigger: "blur" },
        leavedays: { required: true, message: "请输入请假", trigger: "blur" },
        basepay: { required: true, message: "请输入基本工资", trigger: "blur" },
        postwage: {
          required: true,
          message: "请输入岗位工资",
          trigger: "blur",
        },
        meritpay: {
          required: true,
          message: "请输入绩效工资",
          trigger: "blur",
        },
      },
    };
  },
  updated() {	
			this.$nextTick(() => {
				this.$refs['salaryManagement'].doLayout();
			})  
  },
  //接收ID参数
  created() {
    this.companyId = this.$route.query.id;
  },
  mounted() {
    this.getSalaryManagement();
    this.getSelectSalaryOffice();
    this.getSelectSalaryJobs();
    this.get_userIdList();
  },
  methods: {
    //进来就获取数据
    getSalaryManagement() {
      this.salaryLoading = true;
      this.$http({
        url: "/sys/person/findSalary",
        method: "get",
        params: {
          pageNo: this.salaryInfoPageNo,
          pageSize: this.salaryInfoPageSize,
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.showSummary = true;
          this.salaryManagement = data.salaryList;
          this.salaryInfoTotal = data.totalCount;
        }
        this.salaryLoading = false;
      });
    },
    // 查询部门下拉选
    getSelectSalaryOffice() {
      this.$http({
        url: "/sys/person/findOffice",
        method: "get",
        params: {
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsOffice = data.children;
        }
      });
    },
    // 查询岗位下拉选
    getSelectSalaryJobs() {
      this.$http({
        url: "/sys/person/findPostName",
        method: "get",
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsJobs = data.postList;
        }
      });
    },
    //增加薪资的姓名下拉选
    get_userIdList() {
      this.$http({
        url: "/sys/person/findPerson",
        method: "get",
        params: {
          pageNo: this.salaryInfoPageNo,
          pageSize: this.salaryInfoPageSize,
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.userIdList = data.userList;
        }
      });
    },
    // 处理选择的时间
    getSTime(val) {
      this.salaryInfoSearchTiem = val;
      this.salaryInfoSearch.timeOne = this.salaryInfoSearchTiem[0];
      this.salaryInfoSearch.timeTwo = this.salaryInfoSearchTiem[1];
    },
    //搜索薪酬管理
    searchSalary() {
      this.salaryLoading = true;
      this.$http({
        url: "/sys/person/searchSalary",
        method: "get",
        params: {
          pageNo: this.salaryInfoPageNo,
          pageSize: this.salaryInfoPageSize,
          companyId: this.companyId,
          ...this.salaryInfoSearch,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.salaryManagement = data.list;
          this.salaryInfoTotal = data.totalCount;
          this.salaryLoading = false;
        } else {
          this.salaryManagement = [];
          this.salaryInfoTotal = 0;
          this.salaryLoading = false;
        }
      });
    },
    //重置搜索
    resetsearchUsers() {
      (this.salaryInfoSearchTiem = ""),
        (this.salaryInfoSearch = {
          office: "",
          name: "",
          postName: "",
          timeOne: "",
          timeTwo: "",
        }),
        this.getSalaryManagement();
    },
    //下载模板
    add_out() {
      window.location.href =
        "https://admin.dlyrl.com/admin/userfiles/1/userFiles/hr/eventxieban/eventXIeban/2021/2/系统工资模板.xlsx";
    },
    //删除
    deleteCar() {
      let ids = this.checkSalaryNum
        .map((item) => {
          return item.id;
        })
        .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/sys/web/userinfo/delSalary",
          method: "post",
          params: { salaryIds: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.getSalaryManagement();
          }
        });
      });
    },
    //点击选中的行的select
    selectioSalaryChang(val) {
      this.checkSalaryNum = val;
    },
    //合计方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }

        const values = data.map((item) => Number(item[column.property]));

        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    },
    //薪酬管理分页
    salaryHandleSize(val) {
      this.salaryInfoPageSize = val;
      this.salaryInfoPageNo = 1;
      this.getSalaryManagement();
    },
    salaryHandleCurrent(val) {
      this.salaryInfoPageNo = val;
      this.getSalaryManagement();
    },

    //选择完姓名自带数据
    userChang(data) {
      this.userIdList.forEach((val) => {
        if (val.id == data) {
          this.addSalaryByUser.idnumber = val.office.name;
          this.addSalaryByUser.job = val.post.name;
          this.addSalaryByUser.idcard = val.idCard;
          this.addSalaryByUser.phone = val.phone;
          this.addSalaryByUser.bankaccount = val.bankaccount;
          this.addSalaryByUser.bankofdeposit = val.bankofdeposit;
          this.addSalaryByUser.banknumber = val.banknumber;
        }
      });
    },
    //添加时执行的方法
    addSalarys() {
      this.$refs.addSalaryByUser.validate((valid) => {
        if (valid) {
          this.addSalaryByUser.realityattendanceday = Number(
            this.addSalaryByUser.shouldattendanceday -
              this.addSalaryByUser.traveldays -
              this.addSalaryByUser.leavedays
          );
          this.addSalaryByUser.combinedbasic =
            Number(this.addSalaryByUser.basepay) +
            Number(this.addSalaryByUser.postwage) +
            Number(this.addSalaryByUser.meritpay);
          this.addSalaryByUser.totalwelfarebenefits =
            Number(this.addSalaryByUser.senioritypay) +
            Number(this.addSalaryByUser.mealallowance) +
            Number(this.addSalaryByUser.trafficallowance) +
            Number(this.addSalaryByUser.commission) +
            Number(this.addSalaryByUser.travelallowance) +
            Number(this.addSalaryByUser.attendancebonus) +
            Number(this.addSalaryByUser.overtime) +
            Number(this.addSalaryByUser.communicatesubsidy) +
            Number(this.addSalaryByUser.othersupport);
          this.addSalaryByUser.deductionscombined =
            Number(this.addSalaryByUser.basicoldagepension) +
            Number(this.addSalaryByUser.basicmedicalcare) +
            Number(this.addSalaryByUser.unemploymentinsurance) +
            Number(this.addSalaryByUser.housingprovidentfund) +
            Number(this.addSalaryByUser.individualincometax) +
            Number(this.addSalaryByUser.lately) +
            Number(this.addSalaryByUser.leaveearly) +
            Number(this.addSalaryByUser.absenteeism) +
            +Number(this.addSalaryByUser.party) +
            Number(this.addSalaryByUser.workInjury) +
            Number(this.addSalaryByUser.otherdeductions);
          this.addSalaryByUser.totalFees =
            Number(this.addSalaryByUser.providentFund) +
            Number(this.addSalaryByUser.pension) +
            Number(this.addSalaryByUser.medical) +
            Number(this.addSalaryByUser.unemployment) +
            Number(this.addSalaryByUser.businessInjury) +
            Number(this.addSalaryByUser.otherFee);
          this.addSalaryByUser.shouldsalary =
            Number(this.addSalaryByUser.basepay) +
            Number(this.addSalaryByUser.postwage) +
            Number(this.addSalaryByUser.meritpay) +
            (Number(this.addSalaryByUser.senioritypay) +
              Number(this.addSalaryByUser.mealallowance) +
              Number(this.addSalaryByUser.trafficallowance) +
              Number(this.addSalaryByUser.commission) +
              Number(this.addSalaryByUser.travelallowance) +
              Number(this.addSalaryByUser.attendancebonus) +
              Number(this.addSalaryByUser.overtime) +
              Number(this.addSalaryByUser.communicatesubsidy) +
              Number(this.addSalaryByUser.othersupport));
          this.addSalaryByUser.netpayroll =
            Number(this.addSalaryByUser.basepay) +
            Number(this.addSalaryByUser.postwage) +
            Number(this.addSalaryByUser.meritpay) +
            (Number(this.addSalaryByUser.senioritypay) +
              Number(this.addSalaryByUser.mealallowance) +
              Number(this.addSalaryByUser.trafficallowance) +
              Number(this.addSalaryByUser.commission) +
              Number(this.addSalaryByUser.travelallowance) +
              Number(this.addSalaryByUser.attendancebonus) +
              Number(this.addSalaryByUser.overtime) +
              Number(this.addSalaryByUser.communicatesubsidy) +
              Number(this.addSalaryByUser.othersupport)) -
            (Number(this.addSalaryByUser.basicoldagepension) +
              Number(this.addSalaryByUser.basicmedicalcare) +
              Number(this.addSalaryByUser.unemploymentinsurance) +
              Number(this.addSalaryByUser.housingprovidentfund) +
              Number(this.addSalaryByUser.individualincometax) +
              Number(this.addSalaryByUser.lately) +
              Number(this.addSalaryByUser.leaveearly) +
              Number(this.addSalaryByUser.absenteeism) +
              Number(this.addSalaryByUser.party) +
              Number(this.addSalaryByUser.workInjury) +
              Number(this.addSalaryByUser.otherdeductions));
          this.$http({
            url: "/sys/web/userinfo/savaSalary",
            method: "post",
            params: {
              ...this.addSalaryByUser,
            },
          }).then(({ data }) => {
            if (data && data.success) {
              this.$message.success(data.msg);
              this.SalaryByUser_add = false;
              this.getSalaryManagement();
            }
          });
        }
      });
    },
  },
};
</script>